<template>
	<view class="select-car-page">
		<!-- 可滚动内容区域 -->
		<scroll-view class="scroll-container" scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll">

		<!-- 车辆列表 -->
		<view class="car-list">
			<view class="car-item" v-for="(car, index) in carList" :key="index" @click="selectCar(car, index)">
				<view class="car-image">
					<image :src="car.image" mode="aspectFill"></image>
				</view>
				<view class="car-info">
					<text class="car-model">车型: {{ car.model }}</text>
					<text class="car-plate">车牌: {{ car.plate }}</text>
				</view>
				<view class="select-icon">
					<image v-if="selectedIndex === index" src="/static/images/wgh/组 5 拷贝.png" mode="aspectFit"></image>
					<image v-else src="/static/images/wgh/椭圆 4 拷贝 2.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 添加车辆按钮 -->
		<view class="add-car-btn" @click="addCar">
			<uni-icons type="plus" size="20" color="#fff"></uni-icons>
			<text class="btn-text">添加车辆</text>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动相关数据
				scrollTop: 0,
				
				selectedIndex: 0, // 默认选中第一辆车
				carList: [{
						model: '奔驰-GR',
						plate: '豫A00001',
						image: '/static/images/wgh/奔驰GR.png'
					},
					{
						model: '法拉利',
						plate: '豫A00002',
						image: '/static/images/wgh/法拉利.png'
					}
				]
			}
		},
		onLoad() {
			// 获取之前选中的车辆
			const selectedCar = uni.getStorageSync('selectedCar');
			if (selectedCar) {
				// 找到对应的索引
				const index = this.carList.findIndex(car =>
					car.model === selectedCar.model && car.plate === selectedCar.plate
				);
				if (index !== -1) {
					this.selectedIndex = index;
				}
			}
		},
		methods: {
			// 滚动事件处理
			onScroll(e) {
				// 可以在这里添加滚动相关的逻辑
				// 例如：滚动到顶部时显示某些元素等
			},
			selectCar(car, index) {
				this.selectedIndex = index;
				// 保存选中的车辆信息到本地存储（只保存车型和车牌号）
				const carInfo = {
					model: car.model,
					plate: car.plate
				};
				uni.setStorageSync('selectedCar', carInfo);
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 300);
			},
			addCar() {
				uni.showToast({
					title: '添加车辆功能',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.select-car-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 500rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
	}

	/* 滚动容器样式 */
	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}


	/* 车辆列表 */
	.car-list {
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.car-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.car-item:active {
		background-color: #f8f9ff;
	}

	.car-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.car-image image {
		width: 100%;
		height: 100%;
	}

	.car-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.car-model {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
	}

	.car-plate {
		font-size: 28rpx;
		font-weight: 550;
		color: #666;
	}

	.select-icon {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-icon image {
		width: 100%;
		height: 100%;
	}

	/* 添加车辆按钮 */
	.add-car-btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(135deg, #3486FD 0%, #0A64E7 100%);
		border-radius: 80rpx;
		padding: 20rpx 60rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		box-shadow: 0 8rpx 32rpx rgba(52, 134, 253, 0.3);
	}

	.btn-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>